<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            padding-left: 20px;
        }

        .title {
            line-height: 50px;
        }

        .list li {
            line-height: 45px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 class="title">多元素获取和设置</h3>
        <ul class="list">
            <li value="1">01
                <div></div>
            </li>
            <li value="1">02</li>
            <li value="1">03</li>
            <li value="1">04</li>
            <li value="1">05</li>
        </ul>
    </div>
</body>
<script>

    //构造函数
    function GetEle(selector) {
        this.eles = document.querySelectorAll(selector)
        this.html = function (con) {
            if (arguments.length >= 1) { // 如果有参数
                for (var i = 0; i < this.eles.length; i++) {
                    this.eles[i].innerHTML = con;
                }
            } else {
                return this.eles[0].innerHTML;
            }
        }
        this.text = function (con) {
            if (arguments.length >= 1) { // 如果有参数
                for (var i = 0; i < this.eles.length; i++) {
                    this.eles[i].textContent = con;
                }
            } else {
                return this.eles[0].textContent;
            }
        }
        this.val = function (con) {
            if (arguments.length >= 1) { // 如果有参数
                for (var i = 0; i < this.eles.length; i++) {
                    this.eles[i].value = con;
                }
            } else {
                return this.eles[0].value;
            }
        }
    }




    //原型对象
    // function GetEle(selector) {
    //     this.eles = document.querySelectorAll(selector)
    // }
    // GetEle.prototype.html = function (con) {
    //     if (arguments.length >= 1) { // 如果有参数
    //         for (var i = 0; i < this.eles.length; i++) {
    //             this.eles[i].innerHTML = con;
    //         }
    //     } else {
    //         return this.eles[0].innerHTML;
    //     }
    // }
    // GetEle.prototype.text = function (con) {
    //     if (arguments.length >= 1) { // 如果有参数
    //         for (var i = 0; i < this.eles.length; i++) {
    //             this.eles[i].textContent = con;
    //         }
    //     } else {
    //         return this.eles[0].textContent;
    //     }
    // }
    // GetEle.prototype.val = function (con) {
    //     if (arguments.length >= 1) { // 如果有参数
    //         for (var i = 0; i < this.eles.length; i++) {
    //             this.eles[i].value = con;
    //         }
    //     } else {
    //         return this.eles[0].value;
    //     }
    // }

    var $li = new GetEle(".list li");
    // console.log($li);
    $li.text("2222");
    console.log($li.text());


</script>

</html>